<template>
  <div class="home-page">
    <el-card class="welcome-card">
      <template #header>
        <div class="card-header">
          <span>欢迎使用学生管理系统</span>
        </div>
      </template>
      <div class="content">
        <p>这是一个基于Vue 3和Element Plus的学生管理系统示例项目。</p>
        <p>可以使用以下功能：</p>
        <ul>
          <li>学生信息查询</li>
          <li>学生信息录入</li>
          <li>系统日志管理</li>
        </ul>
      </div>
    </el-card>

    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <el-icon :size="36" color="#409eff"><User /></el-icon>
            <div>
              <div class="stat-number">{{ totalStudents }}</div>
              <div class="stat-label">学生总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <el-icon :size="36" color="#409eff"><Calendar /></el-icon>
            <div>
              <div class="stat-number">{{ todayAdded }}</div>
              <div class="stat-label">今日新增</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <el-icon :size="36" color="#409eff"><Document /></el-icon>
            <div>
              <div class="stat-number">{{ todayModified }}</div>
              <div class="stat-label">今日修改</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <el-icon :size="36" color="#409eff"><Delete /></el-icon>
            <div>
              <div class="stat-number">{{ todayDeleted }}</div>
              <div class="stat-label">今日删除</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="system-info-card">
      <template #header>
        <div class="card-header">
          <span>系统信息</span>
        </div>
      </template>
      <div class="system-info-content">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="系统版本">v1.0.0</el-descriptions-item>
          <el-descriptions-item label="Vue版本">3.5.18</el-descriptions-item>
          <el-descriptions-item label="Element Plus版本">2.8.5</el-descriptions-item>
          <el-descriptions-item label="最后更新">2025-09-12</el-descriptions-item>
          <el-descriptions-item label="开发者">杜奕凡</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted } from 'vue'
import { User, Calendar, Document, Delete } from '@element-plus/icons-vue'
import { useStudentStore } from '@/stores/student'

const studentStore = useStudentStore()

// 学生总数
const totalStudents = computed(() => studentStore.totalStudents)

// 今日新增
const todayAdded = computed(() => {
  const today = new Date().toLocaleDateString('zh-CN')
  return studentStore.logs.filter(log => 
    log.date.startsWith(today) && log.action === '学生信息录入'
  ).length
})

// 今日修改
const todayModified = computed(() => {
  const today = new Date().toLocaleDateString('zh-CN')
  return studentStore.logs.filter(log => 
    log.date.startsWith(today) && log.action === '学生信息修改'
  ).length
})

// 今日删除
const todayDeleted = computed(() => {
  const today = new Date().toLocaleDateString('zh-CN')
  return studentStore.logs.filter(log => 
    log.date.startsWith(today) && 
    log.action === '删除学生信息'
  ).length
})

// 初始化数据
onMounted(() => {
  // 可以在这里添加初始化逻辑
})
</script>

<style scoped>
.home-page {
  padding: 20px;
  height: calc(100vh - 130px); /* 总高度 - (header高度 + footer高度 + padding) */
}

.welcome-card {
  margin-bottom: 20px;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.content p {
  font-size: 16px;
  line-height: 1.6;
}

.content ul {
  font-size: 16px;
  line-height: 1.6;
  padding-left: 20px;
}

.stats-row {
  margin-top: 20px;
}

.stat-card {
  border-left: 4px solid #409eff;
}

.stat-item {
  display: flex;
  align-items: center;
}

.stat-item i {
  font-size: 36px;
  margin-right: 15px;
  color: #409eff;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.system-info-card {
  margin-top: 20px;
}

.system-info-content {
  padding: 10px 0;
}
</style>